<template>
  <div class="app-container">
    <el-card class="m-t-15 card" :style="{height:'calc(100vh - 120px)'}">
      <div slot="header" class="flex-cls-nowrap-spc-btw">
        <span>diff算法相关流程及图片</span>

      </div>
      <div>
        <!-- <div>1、新前与旧前  -> 如果条件成立   xi</div> -->
      </div>
      <div class="flex-cls-wrap-spc-ard ">
        <div v-for="(img,key) in imgs" :key="key" class="img m-b-30">
          <img :src="img.url">
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import patchArr from "@/utils/index";
export default {
  data() {
    return {
      imgs: [
        {
          url: require("@/assets/snabbdom/diff/flow.jpg")
        },
        {
          url: require("@/assets/snabbdom/diff/1.jpg")
        },
        {
          url: require("@/assets/snabbdom/diff/2.jpg")
        },
        {
          url: require("@/assets/snabbdom/diff/3.jpg")
        }, {
          url: require("@/assets/snabbdom/diff/3.jpg")
        }
      ]
    };
  },
  mounted() {
    patchArr(this.imgs, 3);
  },
  methods: {

  }
};
</script>

<style scoped lang="scss">
  .img{
    width: 30%;
    height: 30%;
    img{
      width: 100%;
      height: 100%;
    }
  }
</style>
